import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import './test.js' as Jie

Window {
    id: window
    width: 640
    height: 480
    visible: true

    Item {
        id: jieItem
        anchors.fill: parent

        //通过js返回颜色，实现颜色的生成全在函数中实现，只要传入生成rgb颜色的函数即可
        property var colorBuilder: Jie.getColorFactory(Qt.rgba)

        ListView {
            id: jieList
            anchors.fill: parent

            //orientation: ListView.Horizontal //水平排列
            orientation: ListView.Vertical  //默认使用竖直排列

            //使用分组模型必须设置为ListModel不能是js数组
            model: ListModel {
                id: jieListModel

                //分组必须按顺序摆好否则不会给你排序会出现多个重复的分组
                ListElement {
                    name: '张三'
                    group: 'teacher'
                    age: 33
                }
                ListElement {
                    name: '李四'
                    group: 'teacher'
                    age: 23
                }
                ListElement {
                    name: '晨晨'
                    group: 'teacher'
                    age: 23
                }
                ListElement {
                    name: '周六'
                    group: 'teacher'
                    age: 23
                }
                ListElement {
                    name: '说晨'
                    group: 'student'
                    age: 23
                }
                ListElement {
                    name: '阿的'
                    group: 'student'
                    age: 23
                }
                ListElement {
                    name: '动动'
                    group: 'student'
                    age: 23
                }
                ListElement {
                    name: '师傅'
                    group: 'student'
                    age: 23
                }
            }
            delegate: Rectangle {
                //width: ListView.view.width
                width: 80
                height: 30
                required property string name
                color: ListView.isCurrentItem ? jieItem.colorBuilder() : 'gray'
                Text {
                    anchors.centerIn: parent
                    text: name
                    font.italic: parent.ListView.isCurrentItem
                }

                //ListView.onAdd: SpringAnimation {
                ListView.onAdd: {
                    console.log('append list')
                }
            }

            section.property: 'group'
            section.delegate: Rectangle {
                width: 180

                //height: ListView.height/20   //此处有问题会重叠
                height: 30
                color: 'blue'
                required property string section
                Text {
                    anchors.centerIn: parent
                    text: section
                    font.bold: true
                    font.pointSize: 26
                }
            }

            footer: Button {
                text:'append item'
                onClicked: {
                    jieList.model.append({'name': '米敏', 'group': 'student', 'age': 44})
                }
            }
        }
    }
}
